<!--
* @FileDescription: 实时列表态势分析抽屉组件曲线列表
* @Author: yuec621@outlook.com
* @Date: 2024-12-26 13:01:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-09-23 15:33:37
-->
<template>
    <!-- 横向状态图和横向折线图及自定义y轴label -->
    <div :id="'comChart' + index" v-for="(item, index) in state.pointDataList" style="width: 100%
    ;height: 20vh;" :style="{ marginTop: (index * 30) + 'px' }">
    </div>
</template>
<script setup>
import {
    computed,
    nextTick,
    reactive,
    watchEffect
} from 'vue';
import axios from "@/utils/request"
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import useUserStore from "@/store/modules/user";
const {
    proxy
} = getCurrentInstance();
const userStore = useUserStore();
const props = defineProps({
    chartList: {
        type: Object,
        default: () => {
            return {}
        }
    },
    pointDataList: {
        type: Object,
        default: () => {
            return {}
        }
    },
    drawerShow: {
        type: Boolean,
        default: () => {
            return false
        }
    },
    grandType: {
        type: Number,
        default: () => {
            return 0
        }
    },
    nomoreType: {
        type: Number,
        default: () => {
            return 0
        }
    }
})
let comChart
const state = reactive({
    jishi: 0,
    textContent: '',
    chartList: [],
    pointDataList: [],
    chartOptions: {
        xAxis: [],
        yAxis: [],
        legend: [],
    },
    timer: null,
    sunchuList: {},
})

function formatSecToStr(seconds) {
    let daySec = 24 * 60 * 60;
    let hourSec = 60 * 60;
    let minuteSec = 60;
    let dd = Math.floor(seconds / daySec);
    let hh = Math.floor((seconds % daySec) / hourSec);
    let mm = Math.floor((seconds % hourSec) / minuteSec);
    let ss = seconds % minuteSec;
    if (dd > 0) {
        return dd + "天" + hh + "小时" + mm + "分钟" + ss + "秒";
    } else if (hh > 0) {
        return hh + "小时" + mm + "分钟" + ss + "秒";
    } else if (mm > 0) {
        return mm + "分钟" + ss + "秒";
    } else {
        return ss + "秒";
    }
}

function setC1(item) {
    var date = dayjs(item[item.length - 1].dateTime).format('YYYY-MM-DD HH:mm:ss')
    let ggg = dayjs(date).diff(item[0].dateTime, 'second')
    let option = Object.assign(state.chartOptions, {})
    let colors = ['rgba(255, 85, 85, 1)', 'rgba(255, 153, 0, 1)', 'rgba(255, 221, 51, 1)', 'rgba(153, 221, 102, 1)',
        'rgba(85, 204, 153, 1)', 'rgba(170, 119, 238, 1)', 'rgba(221, 119, 238, 1)', 'rgba(62, 26, 214, 1)',
        'rgba(68, 170, 255, 1)', 'rgba(136, 170, 204, 1)', 'rgba(238, 204, 153, 1)', 'rgba(0, 187, 170, 1)'
    ]
    let gridIndex = []
    let thrList = [1, 2, 3]
    let grandGridList = []
    let grandXList = []
    let grandYList = []
    let grandSList = []
    if (props.grandType == 1) {
        for (let i = 0; i < 12; i++) {
            grandXList.push({
                show: false,
                type: "category",
                gridIndex: i + 3,
            })
            grandYList.push({
                type: "value",
                show: false,
                gridIndex: i + 3,
                min: '-50',
                max: '50',
                axisLabel: {
                    show: false
                }
            })
            grandGridList.push({
                left: '3.8%',
                top: '25%',
                height: '65%',
                right: item[0].pointId.includes('D') ? '10%' : '5%',
                bottom: '20%'
            })
            grandSList.push({
                type: "line",
                name: i == 0 ? '一级下限报警' : i == 1 ? '二级下限报警' : i == 2 ? '三级下限报警' : i == 3 ? '四级下限报警' : i ==
                    4 ?
                    '五级下限报警' : i == 5 ? '六级下限报警' : i == 6 ? '一级上限报警' : i == 7 ? '二级上限报警' : i == 8 ?
                        '三级上限报警' : i == 9 ? '四级上限报警' : i == 10 ? '五级上限报警' : '六级上限报警',
                xAxisIndex: i + 3,
                yAxisIndex: i + 3,
                data: item.map(itemsub => {
                    return i == 0 ? itemsub.downGrandoneValue : i == 1 ? itemsub.downGrandtwoValue :
                        i == 2 ? itemsub.downGrandthreeValue : i == 3 ?
                            itemsub.downGrandfourValue :
                            i == 4 ? itemsub.downGrandfiveValue : i == 5 ? itemsub.downGrandsixValue :
                                i == 6 ? itemsub.upGrandoneValue : i == 7 ? itemsub.upGrandtwoValue :
                                    i == 8 ?
                                        itemsub.upGrandthreeValue :
                                        i == 9 ? itemsub.upGrandfourValue :
                                            i == 10 ? itemsub.upGrandfiveValue : itemsub.upGrandsixValue
                }),
                lineStyle: {
                    color: colors[i]
                },
                animation: false
            })
        }
    } else if (props.grandType == 2) {
        for (let i = 0; i < 2; i++) {
            grandXList.push({
                show: false,
                type: "category",
                gridIndex: i + 3,
            })
            grandYList.push({
                type: "value",
                show: false,
                gridIndex: i + 3,
                min: '-50',
                max: '50',
                axisLabel: {
                    show: false
                }
            })
            grandGridList.push({
                left: '3.8%',
                top: '25%',
                height: '65%',
                right: item[0].pointId.includes('D') ? '10%' : '5%',
                bottom: '20%'
            })
            grandSList.push({
                type: "line",
                name: i == 0 ? '上限预报警' : '下限预报警',
                xAxisIndex: i + 3,
                yAxisIndex: i + 3,
                data: item.map(itemsub => {
                    return i == 0 ? itemsub.upPrealarmValue : itemsub.downPrealarmValue
                }),
                lineStyle: {
                    color: colors[i]
                },
                animation: false
            })
        }
    } else {
        grandGridList = []
        grandXList = []
        grandYList = []
        grandSList = []
    }
    thrList.forEach((itemrr, index) => {
        gridIndex.push({
            left: '3.8%',
            top: '25%',
            height: '65%',
            right: item[0].pointId.includes('D') ? '10%' : '5%',
            bottom: '20%'
        })
    })
    option.legend = {
        type: 'scroll',
        show: true,
        top: '-4',
        itemWidth: 15,
        itemHeight: 4,
        icon: 'rect'
    }
    option.xAxis = [{
        type: "category",
        gridIndex: 0,
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(91, 109, 128, 0.8)",
            },
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: true,
            color: "rgba(62, 70, 79, 1)",
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: "rgba(91, 109, 128, 0.16)",
                type: "dashed",
            },
        },
    }, {
        show: false,
        type: "category",
        gridIndex: 1,
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
    }, {
        show: false,
        type: "category",
        gridIndex: 2,
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
    }, ...grandXList, {
        show: false,
        type: "category",
        gridIndex: grandXList.length + 3,
        data: item.map(itemsub => {
            return itemsub.dateTime != null ? dayjs(itemsub.dateTime).format('HH:mm:ss') : ''
        }),
    }]
    option.yAxis = [{
        type: "value",
        position: 'left',
        gridIndex: 0,
        min: item[0].pointId.includes('D') ? 2 : 30,
        nameLocation: '',
        nameTextStyle: {
            color: '#000',
            align: 'right',
            verticalAlign: 'middle',
            rich: {
                b: {
                    padding: [0, 10, 0, 0]
                },
                underline: { //模拟画下划线
                    backgroundColor: 'rgba(218, 231, 255, 1)',
                    position: 'bottom',
                    height: 1,
                    width: 100
                }
            },
        },
        axisLabel: {
            show: item[0].pointId.includes('D') ? false : true,
            formatter: "{value}",
            color: "rgba(62, 70, 79, 1)",
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(91, 109, 128, 0.8)",
            },
        },
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(91, 109, 128, 0.16)",
                type: "dashed",
            },
        },
    }, {
        type: "value",
        gridIndex: 1,
        min: '-50',
        max: '50',
        axisLabel: {
            show: false
        }
    },
    {
        type: "value",
        gridIndex: 2,
        min: '-50',
        max: '50',
        axisLabel: {
            show: false
        }
    }, ...grandYList,
    {
        type: "value",
        gridIndex: grandYList.length + 3,
        min: '-50',
        max: '50',
        axisLabel: {
            show: false
        }
    }
    ]
    option.grid = [...gridIndex, ...grandGridList, {
        left: '3.8%',
        top: '25%',
        height: '65%',
        right: item[0].pointId.includes('D') ? '10%' : '5%',
        bottom: '20%'
    }]
    let dValue, aaa, aaa1, aaa2
    let stateArr = []
    if (item[0].pointId.includes('D')) {
        if (item[1] && item[1].switchShows && item[1].switchShows.length > 0) {
            for (let i = 0; i < item[1].switchShows.length; i++) {
                stateArr.push({
                    label: item[1].switchShows[i],
                    value: i
                })
            }
        }
    }
    option.series = [{
        type: "line",
        name: '实时曲线',
        step: item[0].pointId.includes('D') ? true : false,
        data: item.map((itemsub, suabIndex) => {
            dValue = itemsub.switchShows.map((itemd, indexd) => {
                if (itemsub.pointValue == itemd) {
                    aaa = indexd
                }
                return itemsub.pointValue == itemd ? indexd : null
            })
            return itemsub.pointId.includes('D') ? aaa : suabIndex == 0 ? '-' : itemsub.pointValue
        }),
        xAxisIndex: 0,
        yAxisIndex: 0,
        smooth: false,
        symbol: item[0].pointId.includes('D') ? 'none' : 'pin',
        symbolSize: item[0].pointId.includes('D') ? 4 : 40,
        lineStyle: {
            color: 'rgba(64, 158, 255, 1)', //
        },
        label: {
            show: item[0].pointId.includes('D') ? false : true,
            position: "top",
            offset: [0, 25],
            textStyle: {
                color: "#fff",
            },
        },
        markLine: {
            symbol: "none",
            silent: false,
            data: stateArr.map(item => {
                return {
                    yAxis: item.value,
                    label: {
                        show: true,
                        position: "start",
                        formatter: item.label,
                        fontSize: 14
                    },
                    lineStyle: {
                        color: "transparent"
                    }
                }
            })
        },
        animation: false
    }, {
        type: "line",
        name: props.nomoreType == 0 && !item[0].pointId.includes('D') ? '报警门限' : undefined,
        xAxisIndex: 0,
        yAxisIndex: 0,
        markLine: {
            data: [{
                yAxis: !item[0].pointId.includes('D') && item[0].item.alarmValue != null ? item[0]
                    .item.alarmValue : '',
                lineStyle: {
                    color: !item[0].pointId.includes('D') ? 'rgba(255, 153, 0, 1)' : 'transparent'
                }
            }],
        },
        lineStyle: {
            color: !item[0].pointId.includes('D') ? 'rgba(255, 153, 0, 1)' : 'transparent'
        },
        animation: false
    }, {
        type: "line",
        name: props.nomoreType == 0 && !item[0].pointId.includes('D') ? '解报门限' : undefined,
        xAxisIndex: 0,
        yAxisIndex: 0,
        markLine: {
            data: [{
                yAxis: !item[0].pointId.includes('D') && item[0].item.relieveValue != null ? item[0]
                    .item.relieveValue : '',
                lineStyle: {
                    color: !item[0].pointId.includes('D') ? 'rgba(103, 194, 58, 1)' : 'transparent'
                }
            }],
        },
        lineStyle: {
            color: !item[0].pointId.includes('D') ? 'rgba(103, 194, 58, 1)' : 'transparent'
        },
        animation: false
    }, ...grandSList, {
        type: "line",
        name: '实时曲线',
        step: item[0].pointId.includes('D') ? true : false,
        data: item.map((itemsub, suabIndex) => {
            dValue = itemsub.switchShows.map((itemd, indexd) => {
                if (itemsub.pointValue == itemd) {
                    aaa = indexd
                }
                return itemsub.pointValue == itemd ? indexd : null
            })
            return itemsub.pointId.includes('D') ? aaa : suabIndex == 0 || suabIndex == 1 ? itemsub
                .pointValue : '-'
        }),
        xAxisIndex: grandSList.length,
        yAxisIndex: grandSList.length,
        smooth: false,
        symbol: item[0].pointId.includes('D') ? 'none' : 'pin',
        symbolSize: item[0].pointId.includes('D') ? 4 : 40,
        lineStyle: {
            color: !item[0].pointId.includes('D') ? 'rgba(245, 108, 108, 1)' : 'transparent'
        },
        label: {
            show: item[0].pointId.includes('D') ? false : true,
            position: "top",
            offset: [0, 25],
            textStyle: {
                color: "#fff",
            },
        },

        animation: false
    }]
    option.title = {
        text: '报警持续时长' + '(' + formatSecToStr(ggg) + ')\t\t' +
            item[0].pointId + '/' + item[0].item
                .sensorName +
            '/' + item[0]
                .item.place + '\t\t\t' + item[0].item.alarmTypeStr,
        top: '10%',
        left: '0%',
        textStyle: {
            fontSize: '12',
        },
    }
    return option
}
// 循环定时操作
function startTimer() {
    state.timer = setInterval(() => {
        state.jishi++;
        jiehunFun()
        if (state.jishi >= 60) {
            state.jishi = 0
        }
    }, 1000);
};
startTimer()

function updateChart() {
    for (let index = 0; index < state.pointDataList.length; index++) {
        state.sunchuList['list' + index] = state.chartList.map((item, i) => {
            return item[index]
        })
        nextTick(() => {
            comChart = echarts.init(document.getElementById('comChart' +
                index), 'macarons');
            comChart.setOption(setC1(state.sunchuList['list' + index]))
        })
    }
}
// 获取曲线
const getrealAlarmLine = (data) => {
    return axios({
        url: '/pointData/realAlarmLine',
        method: 'post',
        data: {
            pointIds: data.map(item => {
                return item.pointId
            })
        }
    })
}
async function jiehunFun() {
    if(state.jishi>=60){
        let arrr = props.pointDataList.map(item => {
            return {
                pointId: item.pointId,
                pointValue: item.alarmStartValue,
                dateTime: item.alarmStartTime,
                item: item,
                switchShows: []
            }
        })
        state.chartList=[arrr]
    }
    let arr = await getrealAlarmLine(state.pointDataList)
    state.chartList.push(arr.data)
    updateChart(state.chartList)
}

onMounted(() => {
    window.addEventListener('resize', () => {
        comChart.resize();
    })
})
watchEffect(() => {
    let drawerShow = props.drawerShow
    if (!drawerShow) {
        clearInterval(state.timer)
    } else {
    }
    nextTick(async () => {
        let arr = await getrealAlarmLine(props.pointDataList)
        let sortIndex = arr.data.map(item => item.pointId)
        props.pointDataList.sort((a, b) =>
            sortIndex.indexOf(a.pointId) - sortIndex.indexOf(b.pointId))
        state.pointDataList = props.pointDataList.map(item => {
            return {
                pointId: item.pointId,
                pointValue: item.alarmStartValue,
                dateTime: item.alarmStartTime,
                item: item,
                switchShows: []
            }
        })
        if (state.pointDataList.length > 0) {
            nextTick(() => {
                state.chartList = [state.pointDataList]
                state.pointDataList.forEach((item, i) => {
                    comChart = echarts.init(document.getElementById('comChart' +
                        i), 'macarons');
                    comChart.setOption(setC1([item]));
                })
            })
        }
    })
})
</script>